<script setup>
import { Edit, Delete, View } from '@element-plus/icons-vue';

import {ref,computed } from 'vue'
import {onMounted} from 'vue';

onMounted(async () => {
  await getUserInfo(); // 先获取用户信息
  weeklyreportList();  // 在页面加载时调用 attendanceList
})
const userInfoStore = useUserInfoStore();
//调用函数,获取用户详细信息
const getUserInfo = async () => {
  //调用接口
  let result = await userInfoService();
  //数据存储到pinia中
  userInfoStore.setInfo(result.data);
  userId.value = userInfoStore.info.id;
  isadmin.value = userInfoStore.info.isadmin;
}

//文章分类数据模型
const weeklyreports = ref([])

const userId = ref('')//用户id
const nickname = ref('') // 姓名
const search = ref('') // 搜索
const isadmin = ref('') // 身份

//分页条数据模型
const pageNum = ref(1)//当前页
const total = ref()//总条数
const pageSize = ref(3)//每页条数

//当每页条数发生了变化，调用此函数
const onSizeChange = (size) => {
  pageSize.value = size
  weeklyreportList()
}
//当前页码发生变化，调用此函数
const onCurrentChange = (num) => {
  pageNum.value = num
  weeklyreportList()
}

// 清空表单数据
const clearData = () => {
  RestModel.value = {
    reason: '',
    days: '',
    status: '',
    opinion: '',
    updateTime: ''
  }
}

//回显文章分类
import {getWeeklyReportService} from '@/api/weeklyreport.js'

const weeklyreportList = async () => {
  let params = {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
    isadmin: isadmin.value || null,
    userId: userId.value || null,
  };
  let result = await getWeeklyReportService(params);  // 这里传递 params
  console.log(result);
  total.value = result.data.total;
  weeklyreports.value = result.data.items;
}


import {QuillEditor} from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css'
import {Plus} from '@element-plus/icons-vue'
//控制抽屉是否显示
const visibleDrawer = ref(false)//申请栏
const isvisibleDrawer = ref(false)//审批栏
const visibleDrawerDetail = ref(false)//详情栏

//导入token
import {useTokenStore} from '@/stores/token.js';

const tokenStore = useTokenStore();

//上传成功的回调函数
const uploadSuccess = (result) => {
  articleModel.value.coverImg = result.data;
  console.log(result.data);
}

//添加文章
import {ElMessage} from 'element-plus'
import useUserInfoStore from "@/stores/userInfo";
import {userInfoService, userUpdateService} from "@/api/user";

const showDialog = (row) => {
  isvisibleDrawer.value = true;
  // 数据拷贝
  RestModel.value = {...row} // 简化数据复制
  RestModel.value.id = row.id // 扩展 id 属性
}

const showDialogDetail = (row) => {
  visibleDrawerDetail.value = true;
  // 数据拷贝
  RestModel.value = {...row} // 简化数据复制
  RestModel.value.id = row.id // 扩展 id 属性
}

const checkIn = async () => {
  //调用接口
  let params = {
    userId: userId.value || null,
  };
  console.log(userId.value)
  let result = await checkInService(params);  // 这里传递 params
  ElMessage.success(result.msg ? result.msg : '签到成功');
  //刷新当前列表
  attendanceList();
}

const checkOut = async () => {
  //调用接口
  let params = {
    userId: userId.value || null,
  };
  let result = await checkOutService(params);  // 这里传递 params
  ElMessage.success(result.msg ? result.msg : '签退成功');
  //刷新当前列表
  attendanceList();
}

const statusMap = {
  0: { text: "未审批", color: 'warning' },
  1: { text: "已通过", color: 'success' },
  2: { text: "不通过", color: 'danger' }
};


const formatDate = (row, column, cellValue) => {
  if (!cellValue) return '';
  const date = new Date(cellValue);
  return date.toLocaleString(); // 格式化为本地时间
};

// 计算属性来格式化时间
const formattedCreateTime = computed(() => {
  if (!RestModel.value.createTime) return '';
  const date = new Date(RestModel.value.createTime);
  return date.toLocaleString(); // 格式化成本地时间
});

const approval = async () => {
  let result = await restUpdateService(RestModel.value);
  ElMessage.success(result.msg || '审批成功')
  restList() // 刷新用户列表
  isvisibleDrawer.value = false // 关闭抽屉
}

</script>
<template>
  <el-card class="page-container">
    <template #header>
      <div class="header">
        <span>周报管理</span>
      </div>
    </template>
    <!-- 搜索表单 -->

    <el-form inline isadmin v-show="isadmin == 0">
      <el-form-item label="姓名：">
        <el-input placeholder="请输入请假人" v-model="search"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="restList">搜索</el-button>
        <el-button @click="search = ''">重置</el-button>
      </el-form-item>
    </el-form>


    <!-- 文章列表 -->
    <el-table :data="weeklyreports" style="width: 100%">
      <el-table-column label="序号" width="60">
        <template #default="{ row, $index }">
          {{ ($index + 1) + ((Number(pageNum) - 1) * Number(pageSize)) }}
        </template>
      </el-table-column>
      <el-table-column label="学生ID" prop="memberId"></el-table-column>
      <el-table-column label="本周开始日期" prop="weekStart"></el-table-column>
      <el-table-column label="本周结束日期" prop="weekEnd" ></el-table-column>
      <el-table-column label="本周出勤天数" prop="totalDays" ></el-table-column>
      <el-table-column label="本周缺勤天数" prop="absentDays"></el-table-column>
      <el-table-column label="本周迟到天数" prop="lateDays"></el-table-column>
      <el-table-column label="本周早退天数" prop="earlyDays"></el-table-column>
      <template #empty>
        <el-empty description="没有数据"/>
      </template>
    </el-table>
    <!-- 分页条 -->
    <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[3, 5, 10, 15]"
                   layout="jumper, total, sizes, prev, pager, next" background :total="total"
                   @size-change="onSizeChange"
                   @current-change="onCurrentChange" style="margin-top: 20px; justify-content: flex-end"/>

  </el-card>
</template>
<style lang="scss" scoped>
.page-container {
  min-height: 100%;
  box-sizing: border-box;

  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}

.editor {
  width: 100%;

  :deep(.ql-editor) {
    min-height: 200px;
  }
}
</style>